<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,
		initial-scal=1.0,maximum-scal=2,minium-scal=1,user-scalable=0">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			.contain {
				position: relative;
				overflow-x: hidden;
				height: 100%;
			}
			
			.imgsbox {
				/*width: 2000px;*/
				position: absolute;
				left: 0;
				top: 0;
			}
			img {
				float: left;
			}
			.point{
				width: 15px;
				height: 15px;
				border-radius: 15px;
				background-color: #cec1c1;
				position: absolute;
				top: 28%;
			}
			.point1{
				left: 40%;
			}
			.point2{
				left: 50%
			}
			.point3{
				left: 60%;
			}
		</style>
	</head>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script src="js/touch-0.2.14.min.js"></script>
	<script type="text/javascript" src="js/zepto.animate.js"></script>

	<body>
		<div class="lunbotu">
			<div class="imgsbox">
				<img src="img/shouye/lunbo2.png" alt="" />
				<img src="img/shouye/lunbo1.png" alt="" />
				<img src="img/shouye/lunbo2.png" alt="" />		
				<img src="img/shouye/lunbo2.png" alt="" />
			</div>
			<div class="point point1"></div>
			<div class="point point2"></div>
			<div class="point point3"></div>
		</div>
	</body>
	<script type="text/javascript">
//	console.log($(window).height())
	    var num  = 0;//记录当前变色的小球
		var index = 0; //记录当前播放的是第一张图片
		var width = $(window).width();
		$(".imgsbox").css("width", 6 * width + "px");
		$(".lunbotu").css("width", width + "px");
		$("img").css("width", width + "px");
         $(".point").eq(0).css("background-color","#f46259")
		var imgsbox = document.getElementsByClassName("imgsbox")[0];
         imgsbox.addEventListener("touchstart",function(e){
         	var even = e||event;
         	even.preventDefault();
         	clearInterval(timer)
         },false)
         imgsbox.addEventListener("touchend",function(e){
         	var even = e||event;
         	even.preventDefault();
         	setTimeout(function(){
         		timer = setInterval(left,3000)
         	},1000)
         
         },false)
		//touch.on(imgsbox,"swipeleft swiperight",function(e){
		//  	var even = e||event
		//  	e.preventDefault()
  
		//even.type 表示轻扫的方向.
		//  	switch (even.type){
		//  		case "swipeleft":{
		//  			num++;
		//  			$(".imgsbox").animate({
		//  				left:-num*wd+"px",
		//  			},1000)
		//  			if(num>=5){
		//  				setTimeout(function(){$(".imgsbox").animate({
		//  				left:"0px",
		//  			},1);},1000)
		//  			num=0;
		//  			}
		//  			break;
		//  		}
		//  		
		//  		case "swiperight":{
		//  			num--;
		//  			if(num<=0){
		//  				$(".imgsbox").animate({
		//  				left:-5*wd+"px",
		//  			},0);
		//  			num=4;
		//  			setTimeout(function(){$(".imgsbox").animate({
		//  				left:-num*wd+"px",
		//  			},1000)},1)
		//  			}else{
		//  				$(".imgsbox").animate({
		//  				left:-num*wd+"px",
		//  			},1000)
		//  			}
		//  			break;
		//  		}
		//  	}
		//  })
		$(".lunbotu").on("swiperight swipeleft", function(e) {
			var even = e || event;
			switch(even.type) {
				case 'swiperight':
					right();
					break;
				case 'swipeleft':
				   left();
					break;
			}
		})

		function right() {
			index--;
			num--;
			if(index < 0) {
				index = 2;
				$(".imgsbox").css({
					left: -3 * width + "px"
				})
			}
			$(".imgsbox").animate({
				left: -index * width
			}, 1500)
			if(num<0){
				num=2
			}
			$(".point").css("background-color","#CEC1C1");
			$(".point").eq(index).css("background-color","#f46259")
		}

		function left() {
			index++;
			num++
			if(index == 4) {
				index = 1;
				$(".imgsbox").css({
					left: 0
				})
			}
			$(".imgsbox").animate({
				left: -index * width
			}, 1500);
			if(num>=3){
				num=0
			}
			$(".point").css("background-color","#CEC1C1");
			$(".point").eq(num).css("background-color","#f46259")
		};
	 var timer = setInterval(left,3000)
	</script>

</html>